<!--
 * @Author: g05047
 * @Date: 2021-06-03 15:30:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-26 13:43:44
 * @Description: file content
-->
<template>
  <a-modal :z-index="99" :dialog-style="{ top: '200px',left:'260px' }" title="标记异常" :visible="abnormalModal" @ok="handleOk" @cancel="handleCancel">
    <a-form-model ref="abnormal" :model="abnormalState" :rules="abnormalRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="异常状态" prop="status">
        <a-radio-group :value="abnormalState.status" @change="onChangeStatus">
          <a-radio v-for="(value, key) in taskErrorType" :key="key" :value="key">
            {{ value }}
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="异常描述" prop="desc">
        <a-textarea v-model="abnormalState.desc" :max-length="300" :auto-size="{ minRows: 5 }" placeholder="请输入异常描述" allow-clear />
        <span style="position: absolute; right: 10px; bottom: -5px; color: #ccc; ">{{ abnormalState.desc.length }}/300</span>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import moment from 'moment';
export default {
  name: 'exportModal',
  props: {
    abnormalModal: {
      type: Boolean,
      default: false,
    },
    taskErrorType: Object,
  },
  data () {
    return {
      abnormalState: {
        status: '',
        desc: '',
      },
      abnormalRules: {
        status: [{ required: true, message: '请选择异常状态！', trigger: 'change' }],
        desc: [{ required: true, message: '请输入异常描述！', trigger: 'blur', }],
      },
    };
  },
  methods: {
    moment,
    handleOk () {
      this.$refs.abnormal.validate(valid => {
        if (valid) {
          this.$emit('cancelModal', { modal: '标记异常', str: 'ok', data: this.abnormalState });
        } else {
          return false;
        }
      });
    },
    handleCancel () {
      this.$refs.abnormal.resetFields();
      this.$emit('cancelModal', { modal: '标记异常', str: 'cancel' });
    },
    onChangeStatus (e) {
      this.abnormalState.status = e.target.value;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
